| Vue项目中如何使用computed计算属性 | 您所在的位置：网站首页 › Vue computed有什么用 › Vue项目中如何使用computed计算属性 |
Vue项目中如何使用computed计算属性
|
文章目录
computed:
1、基本使用：
1.1 应用场景：
1.2 代码位置：
1.3 值：
2、复杂操作-结合data中数据：
3、计算属性写法演变：
3.1 计算属性的setter和getter：
① 完整的计算属性写法：属性+方法
② 计算属性一般只有get方法，是只读属性。所以一般写法为：
③ 语法糖---简化写法：
4、项目中实例：
computed:
1、基本使用：
在computed中定义一个函数（看起来是一个函数，其实是一个属性），命名按照属性规范命名(一般为名词)。 1.1 应用场景：当数据A的逻辑很复杂时，把A这个数据写在计算属性中。 1.2 代码位置：通过选项computed：{计算属性a:值} 1.3 值：带有返回值return的函数。 计算属性a和data中的数据用法一样。计算属性在computed中进行定义，无需再在data中定义，在template中直接可进行使用，使用方式与data中定义的数据一样。 { { msg}} { { str}} var vm = new Vue({ el: '#app', data: { msg: 'abc' }, computed: { str: function () { return this.msg } }, methods: { } })执行结果： 当计算属性b依赖了data中的数据a时，当a变化时，b会自动变化。这也是在开发中通常用到的情况。比如在购物的时候，下某一订单时，每选择一件商品（对应data中的数据a），合计费用（对应计算属性b）就会跟着变化。 |
下方的例子即模拟上方的效果：【本文地址】
公司简介
联系我们